<template>
  <div class="user-total">
    <div class="user-total-title">资源总量</div>
    <div class="user-total-warp">
      <div
        class="user-total-item"
        v-for="item in list"
        :style="{ background: item.background }"
      >
        <div class="user-total-type">
          <div :style="{ background: item.color }" />
          {{ item.type }}
        </div>
        <div class="user-total-num">
          <div :style="{ color: item.color }">{{ item.num }}</div>
        </div>
        <div class="user-total-en" :style="{ color: item.enColor }">
          {{ item.en }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "user-total",
  components: {},
  data() {
    return {
      list: [
        {
          type: "虚拟CPU",
          en: "核",
          num: 0,
          color: "rgb(243,148,51)",
          background: "#fff7e9",
          enColor: "rgb(255,169,215)",
        },
        {
          type: "虚拟内存",
          en: "GB",
          num: 0,
          color: "rgb(83,68,190)",
          background: "#e8eaff",
          enColor: "rgb(144,220,255)",
        },
        {
          type: "存储总量",
          en: "TB",
          num: 0,
          color: "rgb(47,138,250)",
          background: "#e4fdf4",
          enColor: "rgb(129,217,227)",
        },
      ],
    };
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    init(data) {
      this.list[0].num = data.vcpuCount;
      this.list[1].num = data.vmemoryCount;
      this.list[2].num = data.romCount;
    },
  },
};
</script>

<style scoped lang="scss">
.user-total {
  // color: #e4fdf4;
  margin: 20px 0 0 0px;
  background: white;
  border-radius: 6px;
  padding: 16px 16px 40px 16px;
  width: 48%;
  width: 700px;
  height: 284px;
  .user-total-title {
    border-left: 3px solid rgb(138, 205, 255);
    font-weight: bold;
    padding-left: 10px;
    margin-bottom: 10px;
  }
  .user-total-warp {
    display: flex;
    justify-content: space-around;
    .user-total-item {
      border-radius: 6px;
      width: 25%;
      padding: 3%;
      .user-total-type {
        display: flex;
        div {
          width: 6px;
          height: 6px;
          border-radius: 6px;
          margin: 6px 4px 0 0;
        }
      }
      .user-total-num {
        margin: 30px 0;
        color: rgb(178, 180, 201);
        display: flex;
        line-height: 50px;
        justify-content: center;
        div {
          font-size: 38px;
          font-weight: bold;
          margin: 0 10px;
        }
      }
      .user-total-en {
        text-align: center;
        font-weight: bold;
        font-size: 18px;
      }
    }
  }
}
</style>
